<template>
	<view class="uni-header">
		<uni-stat-breadcrumb class="uni-stat-breadcrumb-on-phone" />
		<view class="uni-group">
			<input class="uni-search" type="text" v-if="props.buttons.find(item=>item==='search')" v-model="query"
				@confirm="onSearch" :placeholder="$t('common.placeholder.query')" />
			<button class="uni-button hide-on-phone" type="default" size="mini"
				v-if="props.buttons.find(item=>item==='search')"
				@click="onSearch">{{$t('common.button.search')}}</button>
			<button class="uni-button" type="primary" size="mini" v-if="props.buttons.find(item=>item==='add')"
				@click="onAdd">{{$t('common.button.add')}}</button>
			<button class="uni-button" type="warn" size="mini" :disabled="!selectedIndexs.length"
				v-if="props.buttons.find(item=>item==='delete')"
				@click="onDelete">{{$t('common.button.batchDelete')}}</button>
			<!-- #ifdef H5 -->
			<button class="uni-button" type="primary" size="mini" :disabled="!selectedIndexs.length">下载</button>
			<!-- #endif -->
			
		</view>

		<uni-popup ref="addPopup" type="center" border-radius="10px 10px 0 0">
			<uni-card title="新增" extra="">
				<uni-forms ref="form" :modelValue="addFormData" :rules="rules">
					<uni-forms-item label="文件名" name="name">
						<uni-easyinput type="text" v-model="addFormData.name" placeholder="请输入文件名" />
					</uni-forms-item>
					<uni-forms-item label="文件类型" name="name">
						<uni-easyinput type="text" :value="props.type" :disabled="true" />
					</uni-forms-item>
					<uni-forms-item label="预览图地址" name="email">
						<uni-easyinput class="input" v-model="addFormData.src" type="text" placeholder="请输入url"
							 />
					</uni-forms-item>
					<uni-forms-item label="资源地址" name="email">
						<uni-easyinput class="input" v-model="addFormData.cover" type="text" placeholder="请输入url"
							 />
					</uni-forms-item>
				</uni-forms>
				<view>
					<button @click="onClose">取消</button>
					<button @click="onAddFn">确定</button>
				</view>
				
			</uni-card>
		</uni-popup>
	</view>
</template>

<script setup lang="ts">
	import { addPopup,query, onSearch, onDelete,onAddFn, selectedIndexs,addFormData } from './hooks.js'
	import { ref } from 'vue'
	interface Props {
		buttons ?: any
		likes ?: number,
		type?:string
	}
	
	const props = defineProps<Props>()

	let onAdd = () => {
		addPopup.value.open('center')
	}
	let onClose=()=>{
		addPopup.value.close()
	}

	
	let rules = ref({
		// 对name字段进行必填验证
		name: {
			rules: [{
				required: true,
				errorMessage: '请输入文件名',
			},
			{
				minLength: 3,
				maxLength: 50,
				errorMessage: '文件名长度在 {minLength} 到 {maxLength} 个字符',
			}
			]
		},
		src: {
			rules: [{
				required: true,
				errorMessage: '请输入地址',
			}]
		},
		cover: {
			rules: [{
				required: true,
				errorMessage: '请输入地址',
			}]
		}
	})
	
	
	
</script>

<style>
</style>